<template>
	<view class="container">
		<view class="index_view">
			<view class="my_num">
				<view class="tops">
					<text>当前可用资产</text>
					<view class="adc_total">{{ moneyFormat('4,083') }} ADC</view>
					<view class="cny_total">≈{{ moneyFormat('26,947.80') }} CNY</view>
					<view class="eye" :class="[showPassword==true?'':'on']" :name="eyeIconName" @click="eyeIconName == 'eye-off' ? (eyeIconName = 'eye') : (eyeIconName = 'eye-off')"></view>
				</view>
			</view>
			
			<view class="views_type">
				<view>
					<image src="/static/images/img_80.png" mode="heightFix"></image>
					<text>买/卖ADC</text>
				</view>
				<view>
					<image src="/static/images/img_81.png" mode="heightFix"></image>
					<text>赚取ADC</text>
				</view>
			</view>
			
			<view class="view_num">
				<view><text>6.72</text>buy</view>
				<view><text>3.28</text>SELL</view>
			</view>
			
			<view class="view_news">
				<view>
					<view class="tit">团结起来，争取更大的胜利！</view>
					<view class="time">2018-03-18  17:56<text>公告</text><text class="new">NEW</text></view>
				</view>
				<view>
					<view class="tit">庆祝伟大的中华人民共和国成立七十周年活动</view>
					<view class="time">2018-03-18  17:56<text>公告</text><text class="new">NEW</text></view>
				</view>
				<view>
					<view class="tit">ADDAO荣获网络广告创新奖</view>
					<view class="time">2018-03-18  17:56<text>公告</text><text class="hot">HOT</text></view>
				</view>
			</view>
			
			<view class="view_tb">
				<view class="tit">近30日购买/出售比</view>
				<view class="tb">
					<text style="background-color: #70C2A5;"></text>
					<view>购买</view>
					<text style="background-color: #F19D99;"></text>
					<view>出售</view>
				</view>
				<view class="num_con">
					<view class="num"><text>{{buy_sell_time}}</text>购买<text>{{buy_sell_nums}}</text> 出售<text>{{buy_sell_nums01}}</text></view>
				</view>
				<view class="img">
					<l-echart ref="buy_sell_chart" @finished="init"></l-echart>
				</view>
				<view class="show_time">2022-07-09<text>08-07</text></view>
			</view>
			
			<view class="view_tb">
				<view class="tit">近30日动态/静态收入占比</view>
				<view class="tb">
					<text style="background-color: #F9CC91;"></text>
					<view>动态</view>
					<text style="background-color: #70C2A5;"></text>
					<view>静态</view>
				</view>
				<view class="num_con">
					<view class="num"><text>{{tair_time}}</text>动态<text>{{tair_nums}}%</text> 静态<text>{{tair_nums01}}%</text></view>
				</view>
				<view class="img">
					<l-echart ref="tair_chart" @finished="init"></l-echart>
				</view>
				<view class="show_time">2022-07-09<text>08-07</text></view>
			</view>
			
			<view class="view_tb">
				<view class="tit">广告机器功率分布</view>
				<view class="intros">昨日各功率广告机器分布情况</view>
				<view class="num_con">
					<view class="num"><text>{{power_num}}CPM / {{power_num01}}%</text></view>
				</view>
				<view class="img">
					<l-echart ref="power_chart" @finished="init"></l-echart>
				</view>
			</view>
			
			<view class="view_tb">
				<view class="tit">近30日流量与收益走势</view>
				<view class="tb">
					<text style="background-color: #F19D99;"></text>
					<view>流量</view>
					<text style="background-color: #70C2A5;"></text>
					<view>收入</view>
				</view>
				<view class="num_con">
					<view class="num"><text>{{zxt_time}}</text><image src="/static/images/img_83.png"></image><image src="/static/images/img_84.png"></image></view>
				</view>
				<view class="img">
					<l-echart ref="zxt_chart" @finished="init"></l-echart>
				</view>
				<view class="show_time" style="padding-left: 3%;">2022-07-09<text>08-07</text></view>
				<view class="cons">因涉及流量有效率和广告价格差异，所以两者曲线波动并非绝对成正比。</view>
			</view>
			
			<view class="view_happen">
				<view class="tit_top">最近发生</view>
				<view class="team_li">
					<view class="tit">130******07  加入ADDAO</view>
					<text>9秒前</text>
				</view>
				<view class="team_li team_li01">
					<view class="tit">188******68  晋升星级会员</view>
					<text>9秒前</text>
				</view>
				<view class="team_li team_li02">
					<view class="tit">156******70  晋升正式会员</view>
					<text>9秒前</text>
				</view>
				<view class="team_li team_li03">
					<view class="tit">136******99  启动了一台广告机</view>
					<text>9秒前</text>
				</view>
			</view>
			
		</view>
		
		<!--弹窗start-->
		<u-popup  mode="center" :show="index_box" :closeOnClickOverlay="true" @close="index_popup_close" customStyle="background: none">
			<view class="inex_img">
				<image src="/static/images/img_85.png" mode="widthFix" class="img"></image>
				<image src="/static/images/img_39.png" mode="widthFix" class="close"  @tap="index_popup_close"></image>
			</view>
		</u-popup>
		<!--弹窗end-->
		
		
	</view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
export default{
	data(){
		return{
			eyeIconName: 'eye',
			showPassword: false,
			buy_sell_time:"07-08",
			buy_sell_nums:'6.4',
			buy_sell_nums01:'3.6',
			buy_sell_option: {
				legend: {
					show:false,
					selectedMode:false,
					data: ['购买', '出售'],
					left: '0%',
					top: '1%',
					textStyle: {
						color: "#3C3736"
					},
					itemWidth: 12,
					itemHeight: 12,
					itemStyle:{
						borderWidth:0
					}
				},
				grid: {
					top: '3%',
					right: '2%',
					left: '7%',
					bottom: '2%'
				},
				xAxis: [{
					type: 'category',
					data: ['07-08', '07-09', '07-10', '07-11', '07-12', '07-13', '07-14','07-15', '07-16', '07-17', '07-18', '07-19', '07-20', '07-21','07-22', '07-23', '07-24', '07-25', '07-26', '07-27', '07-28','07-29', '07-30', '07-31', '08-01', '08-02', '08-03', '08-04', '08-05', '08-06'],
					axisLine: {
						show:false,
					},
					axisLabel: {
						show: false,
						margin: 10,
						color: '#5F5D5D',
						textStyle: {
							fontSize: 12
						},
					},
					axisTick: {
						show: false
					},
				}],
				yAxis: [{
					axisLabel: {
						formatter: '{value}',
						color: '#A1A1A1',
						textStyle: {
							fontSize: 12
						},
					},
					axisLine: {
						show: false
					},
					splitLine: {
						lineStyle: {
							color: 'rgba(255,255,255,0.12)'
						}
					}
				}],
				series: [{
					name:"出售",
					type: 'bar',
					stack: "总量",
					data: [6.4, 3.2, 5.7, 6.3, 5.6, 1.9, 2.5,3.6, 4.5, 7.7, 5.9, 6.7, 1.5, 5.6,4.6, 4.7, 3.7, 3.9, 2.5, 1.8, 5.6,3.0, 4.5, 7.1, 2.0, 2.5, 1.8, 3.6, 1.8, 3.6],
					barWidth: '100%',
					itemStyle: {
						normal: {
							color:"#F19D99",
							borderColor:"#646262",
							borderWidth:1
						}
					}
				},{
					name:"购买",
					type: 'bar',
					stack: "总量",
					data: [3.6, 6.8, 4.3,3.7, 4.4, 8.1,7.5, 6.4, 5.5, 2.3, 4.1, 3.3, 8.5, 4.4, 5.4, 5.3, 6.3, 6.1, 7.5, 8.2, 4.4, 7.0, 5.5, 2.9, 8.0, 7.5, 8.2, 6.4, 8.2, 6.4],
					barWidth: '100%',
					itemStyle: {
						normal: {
							color:"#70C2A5",
							borderColor:"#646262",
							borderWidth:1
						}
					}
				}]
			},
			tair_time:'07-08',
			tair_nums:'48.2',
			tair_nums01:'41.8',
			tair_option: {
				tooltip: {
					show: false,
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {
					show:false,
					selectedMode:false,
					data: ['动态', '静态'],
					left: '0%',
					top: '1%',
					textStyle: {
						color: "#3C3736"
					},
					itemWidth: 12,
					itemHeight: 12,
					itemStyle:{
						borderWidth:0
					}
				},
				grid: {
					top: '5%',
					right: '2%',
					left: '8%',
					bottom: '2%'
				},
				xAxis: [{
					type: 'category',
					data: ['07-08', '07-09', '07-10', '07-11', '07-12', '07-13', '07-14','07-15', '07-16', '07-17', '07-18', '07-19', '07-20', '07-21','07-22', '07-23', '07-24', '07-25', '07-26', '07-27', '07-28','07-29', '07-30', '07-31', '08-01', '08-02', '08-03', '08-04', '08-05', '08-06'],
					axisLine: {
						show:false,
					},
					axisLabel: {
						show: false,
						margin: 10,
						color: '#5F5D5D',
						textStyle: {
							fontSize: 12
						},
					},
					axisTick: {
						show: false
					},
				}],
				yAxis: [{
					axisLabel: {
						formatter: '{value}',
						color: '#A1A1A1',
						textStyle: {
							fontSize: 12
						},
					},
					axisLine: {
						show: false
					},
					splitLine: {
						lineStyle: {
							color: 'rgba(255,255,255,0.12)'
						}
					}
				}],
				series: [{
					name:"动态",
					type: 'bar',
					stack: "总量",
					data: [36, 68, 43, 43, 37, 44, 81, 75, 64, 55, 23, 41, 33, 85, 44, 54, 53, 63, 75, 82, 44, 70, 55, 29, 80, 75, 82, 64, 82, 64],
					barWidth: '100%',
					itemStyle: {
						normal: {
							color:"#F9CC91",
							borderColor:"#3C3736",
							borderWidth:1
						}
					}
				},{
					name:"静态",
					type: 'bar',
					stack: "总量",
					data: [64, 32, 57, 57, 63, 56, 19, 25,36, 45, 77, 59, 67, 15, 56, 46, 47, 37, 25, 18, 56, 30, 45, 71, 20, 25, 18, 36, 18, 36],
					barWidth: '100%',
					itemStyle: {
						normal: {
							color:"#70C2A5",
							borderColor:"#3C3736",
							borderWidth:1
						}
					}
				}]
			},
			power_num:'300',
			power_num01:'23.3',
			power_option: {
				tooltip: {
					show: false,
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					show:true,
					top: '15%',
					right: '4%',
					left: '11%',
					bottom: '10%',
					backgroundColor: '#3C3736',
				},
				yAxis: [{
					name: "单位：CPM",
					nameTextStyle: {
						color: "#3C3736"
					},
					type: 'category',
					data: ['100', '200', '300', '400', '500', '600', '700','800', '900', '1000'],
					axisLine: {
						show:false,
					},
					axisLabel: {
						margin: 10,
						color: '#3C3736',
						textStyle: {
							fontSize: 12
						},
						interval:0,
					},
					axisTick: {
						show: false
					},
				}],
				xAxis: [{
					axisLabel: {
						formatter: '{value}%',
						color: '#5F5D5D',
						textStyle: {
							fontSize: 12
						},
					},
					axisLine: {
						show: false
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: 'rgba(255,255,255,0.12)'
						}
					}
				}],
				series: [{
					name:"",
					type: 'bar',
					data: ['15', '20', '57', '15', '20', '50.3','15', '20', '18.5', '37.2'],
					barWidth: '100%',
					itemStyle: {
						normal: {
							color:"#70C2A5",
							borderColor:"#3C3736",
							borderWidth:1
						}
					}
				}]
			},
			zxt_time:'07-08',
			zxt_option : {
				legend: {
					show:false,
					selectedMode:false,
					icon: 'stack',
					data: ['流量', '收入'],
					left: '0%',
					top: '3%',
					textStyle: {
						color: "#3C3736"
					},
					itemWidth: 12,
					itemHeight: 12,
					itemStyle:{
						borderWidth:0
					}
				},
				grid: {
					show: true,
					top: '5%',
					right: '2%',
					left: '3%',
					bottom: '2%',
					backgroundColor: '#3C3736',
				},
			    xAxis: {
					type: 'category',
					axisLabel: {
						show: false,
						color: '#3C3736',
						textStyle: {
							fontSize: 10
						},
						interval:0,
						rotate: 50,
					},
					axisLine:{
						lineStyle:{
							color: '#000'
						}
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show:true,
						lineStyle: {
							color: '#000',
							with: 1
						}
					},
					boundaryGap: false,
					data: ['07-08', '07-09', '07-10', '07-11', '07-12', '07-13', '07-14', '07-15', '07-16', '07-17', '07-18', '07-19', '07-20', '07-21', '07-22', '07-23', '07-24', '07-25', '07-26', '07-27', '07-28', '07-29', '07-30', '07-31']
			    },
				yAxis: {
					type: 'value',
					axisLabel: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
				},
				series: [{
					data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 218, 135, 147],
					type: 'line',
					name:"流量",
					itemStyle: {
						normal: {
							color:"#F19D99",
						}
					}
			    },
				{
					data: [100, 130, 124, 118, 35, 47, 60, 50, 130, 124, 118, 35, 47, 160, 50, 130, 124, 118, 35, 147, 160, 118, 105, 140],
					type: 'line',
					name:"收入",
					itemStyle: {
						normal: {
							color:"#70C2A5",
						}
					}
				}]
			},
			index_box: true,
		}
	},
	mounted() {
		this.init();
	},
	computed: {
		// 格式化金额，等位数转换为星
		moneyFormat(e) {
			return e => {
				if (e || e == 0) {
					e = e.toString();
				}
				if (e && this.eyeIconName == 'eye-off') {
					this.showPassword = true;
					let temp = [];
					e.split('').forEach(item => {
						temp.push('*');
				});
				return temp.join('');
				} else {
					this.showPassword =false;
					parseFloat(e)
					.toFixed(2)
					.replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
					return e;
				}
			};
		},
	},
	methods:{
		init() {
			this.$refs.buy_sell_chart.init(echarts, chart => {
				chart.setOption(this.buy_sell_option);
				chart.off('click');
				chart.getZr().on('click', (params) => {
				    let pointInPixel = [params.offsetX, params.offsetY];
				    if (chart.containPixel('grid', pointInPixel)) {
				        let pointInGrid = chart.convertFromPixel({
				            seriesIndex: 0
				        }, pointInPixel);
				        let xIndex = pointInGrid[0]; //索引
				        let handleIndex = Number(xIndex);
				        let seriesObj = chart.getOption(); //图表object对象
				        var op = chart.getOption();
				        //获得图表中点击的列
				        this.buy_sell_time = op.xAxis[0].data[handleIndex];  //获取点击的列名
						this.buy_sell_nums = parseFloat(seriesObj.series[1].data[handleIndex]).toFixed(1);
						this.buy_sell_nums01 = parseFloat(seriesObj.series[0].data[handleIndex]).toFixed(1);
				    }
				});	    
		    });
			
			this.$refs.tair_chart.init(echarts, chart => {
				chart.setOption(this.tair_option);
				chart.off('click');
				chart.getZr().on('click', (params) => {
				    let pointInPixel = [params.offsetX, params.offsetY];
				    if (chart.containPixel('grid', pointInPixel)) {
				        let pointInGrid = chart.convertFromPixel({
				            seriesIndex: 0
				        }, pointInPixel);
				        let xIndex = pointInGrid[0]; //索引
				        let handleIndex = Number(xIndex);
				        let seriesObj = chart.getOption(); //图表object对象
				        var op = chart.getOption();
				        //获得图表中点击的列
				        this.tair_time = op.xAxis[0].data[handleIndex];  //获取点击的列名
						this.tair_nums = parseFloat(seriesObj.series[1].data[handleIndex]).toFixed(1);
						this.tair_nums01 = parseFloat(seriesObj.series[0].data[handleIndex]).toFixed(1);
				    }
				});	    
		    });
			
			this.$refs.power_chart.init(echarts, chart => {
				chart.setOption(this.power_option);
				chart.off('click');
				chart.getZr().on('click', (params) => {
				    let pointInPixel = [params.offsetX, params.offsetY];
				    if (chart.containPixel('grid', pointInPixel)) {
				        let pointInGrid = chart.convertFromPixel({
				            seriesIndex: 0
				        }, pointInPixel);
				        let xIndex = pointInGrid[1]; //索引
				        let handleIndex = Number(xIndex);
				        let seriesObj = chart.getOption(); //图表object对象
				        var op = chart.getOption();
				        //获得图表中点击的列
				        this.power_num = op.yAxis[0].data[handleIndex];  //获取点击的列名
						this.power_num01 = seriesObj.series[0].data[handleIndex];
				    }
				});	    
			});
			
			this.$refs.zxt_chart.init(echarts, chart => {
				chart.setOption(this.zxt_option);
				chart.off('click');
				chart.getZr().on('click', (params) => {
				    let pointInPixel = [params.offsetX, params.offsetY];
				    if (chart.containPixel('grid', pointInPixel)) {
				        let pointInGrid = chart.convertFromPixel({
				            seriesIndex: 0
				        }, pointInPixel);
				        let xIndex = pointInGrid[0]; //索引
				        let handleIndex = Number(xIndex);
				        let seriesObj = chart.getOption(); //图表object对象
				        var op = chart.getOption();
				        //获得图表中点击的列
				        this.zxt_time = op.xAxis[0].data[handleIndex]; 
				    }
				});	 
			});	
		},
		
		index_popup_close(){
			this.index_box = false
		}	
			
	}
}
</script>

<style lang="scss">
@import url("index.scss");
@import url("../../common/style.scss");
</style>